import React, { useState, useEffect } from 'react';
import { ActivityIndicator, ListView } from 'antd-mobile';
import { isEmpty } from 'project-libs';
import OrderItem from '../Item';
import ShowLoading from '@/components/ShowLoading';
import OrderSkeletons from '@/skeletons/OrderSkeletons';
interface props {
  type: number;
  orders: { id: string }[];
  showLoading: boolean;
  handleRefresh: () => void;
}
export default function(props: props) {
  const [state, setState] = useState(false);
  const dataSource = new ListView.DataSource({
    rowHasChanged: (r1: any, r2: any) => r1 !== r2,
  });
  const { orders, showLoading, handleRefresh } = props;

  const row = (item: { id: string }) => (
    <OrderItem type={props.type} key={item.id} {...item} />
  );

  useEffect(() => {
    setTimeout(() => {
      if (isEmpty(props?.orders)) {
        setState(true);
      }
    }, 1500);
  }, []);
  return (
    <div>
      {isEmpty(props?.orders) ? (
        state === true ? (
          <ShowLoading showLoading={false} />
        ) : (
          <OrderSkeletons />
        )
      ) : (
        <div className="tab-lists">
          <ListView
            dataSource={dataSource.cloneWithRows(orders)}
            renderFooter={() => <ShowLoading showLoading={showLoading} />}
            style={{ height: '100vh' }}
            onEndReached={handleRefresh}
            renderRow={row}
            initialListSize={7}
          />
        </div>
      )}
    </div>
  );
}
